<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<!-- <script type="text/javascript">
			
			//测试使用 jQuery clone 方法: 复制节点
			$(function(){
				
				$("li").click(function(){
					alert($(this).text());
				});
				
				//复制 #bj 节点, 并添加到 #rl 节点的后面
				/*
				1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
				属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
				2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. 
				*/
				$("#bj").clone(true)
				        .attr("id", "bj2")
				        .insertAfter($("#rl"));
				
			})
			
		
		</script> -->

<script type="text/javascript">
	$(function() {
		//对所有文本结点添加点击事件
		$("ul li").click(function() {
			alert($(this).text());
		});
		//节点的克隆
		//在克隆是注意clone方法和attr方法的先后顺序
		//clone() 和 clone(true) 方法区别是前者不对事件进行克隆

		$("#bj").clone().attr("id", "bj2").insertAfter($("#se"));
		//对事件进行克隆
		$("#bj").clone(true).attr("id", "bj2").insertAfter($("#rl"));

	});
</script>

</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
		<li id="bj" name="BeiJing">北京</li>
		<li>上海</li>
		<li id="dj">东京</li>
		<li id="se">首尔</li>
	</ul>

	<br>
	<br>
	<p>你喜欢哪款单机游戏?</p>
	<ul id="game">
		<li id="rl">红警</li>
		<li>实况</li>
		<li>极品飞车</li>
		<li>魔兽</li>
	</ul>

	<br>
	<br> gender:
	<input type="radio" name="gender" value="male" />Male
	<input type="radio" name="gender" value="female" />Female

	<br>
	<br> name:
	<input type="text" name="username" value="atguigu" />

</body>
</html>
